<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>东东推注册</title>
		<link href="../static/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link href="../static/css/common.css" rel="stylesheet">
		<link href="../static/css/login.css" rel="stylesheet">
	</head>

	<body class="bodyb-color">
		<div class="container-fluid bodyb-color">
			<div class=" container-fluid heardb-color">
				<div class="container" style="padding-top: 1.2%;padding-bottom: 1.3%;">
					<img src="../static/images/logo1.png" onclick="javascript:window.location.href='index.html'" />
					<p class="navbar-text navbar-right heard-text" onclick="javascript:window.location.href='login.html'">已有东东推账号，立即登录</p>
				</div>
			</div>
			<div class="container-fluid">
				<div class="login-con register" id="reg-con">
					<p class="ddt-bt text-center"><strong style="font-size: 26px">注册：填写信息</strong></p>
					<form class="form-horizontal">
						<div class="form-group">
							<div class="col-sm-12">
								<input type="text" class="form-control" id="userNickName" placeholder="用户名" maxlength="16">
								<span id="helpBlock" class="help-block">　</span>
								<span class="glyphicon glyphicon-remove-sign form-control-feedback none error" aria-hidden="true"></span>
								<span class="glyphicon glyphicon-ok-sign form-control-feedback none success" aria-hidden="true"></span>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<input type="password" class="form-control" id="userPwd" placeholder="密码" maxlength="16">
								<span id="helpBlock" class="help-block">　</span>
								<span class="glyphicon glyphicon-remove-sign form-control-feedback none error" aria-hidden="true"></span>
								<span class="glyphicon glyphicon-ok-sign form-control-feedback none success" aria-hidden="true"></span>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<input type="password" class="form-control" id="againUserPwd" placeholder="确认密码" maxlength="16">
								<span id="helpBlock" class="help-block">　</span>
								<span class="glyphicon glyphicon-remove-sign form-control-feedback none error" aria-hidden="true"></span>
								<span class="glyphicon glyphicon-ok-sign form-control-feedback none success" aria-hidden="true"></span>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12">
								<input type="text" class="form-control" id="phone" placeholder="手机号码" maxlength="11">
								<span id="helpBlock" class="help-block">　</span>
								<span class="glyphicon glyphicon-remove-sign form-control-feedback none error" aria-hidden="true"></span>
								<span class="glyphicon glyphicon-ok-sign form-control-feedback none success" aria-hidden="true"></span>
							</div>
						</div>
						
						<div class="form-group">
							<div class="col-xs-8" style="padding-right: 2%;">
								<input type="text" class="form-control" id="code" placeholder="验证码" maxlength="6">
								<span id="helpBlock" class="help-block">　</span>
								<span class="glyphicon glyphicon-remove-sign form-control-feedback none error" aria-hidden="true"></span>
								<span class="glyphicon glyphicon-ok-sign form-control-feedback none success" aria-hidden="true"></span>
							</div>
							<div class="col-xs-4" style="padding-left: 2%;">
								<input type="button" class="btn btn-default ddt-btn code-btn" id="verCodeBtn" value="获取验证码" onclick="sendemail()" />
								<!--<button type="button" class="btn btn-default ddt-btn code-btn" onclick="sendemail()" value="获取验证码"></button>-->
							</div>
						</div>
						<button type="button" class="btn btn-default ddt-btn from-btn" id="ddtRegister">注册</button>
					</form>
					<p class="text-center register-agreement">注册即为同意<span class="ddt-agreement">《东东推用户协议》</span></p>
				</div>
				<div class="login-con register" id="agr-con">
					<p class="ddt-bt text-center"><strong>东东推注册协议</strong></p>
					<div class="pre-scrollable agreement-con" style="height: 500px;">
						<dl>
						  <dt><h3>一、总则</h3></dt>
						  <dd>1.1 东东推的所有权和运营权归天津市数字未来科技有限公司所有。</dd>
						  <dd>1.2 用户在注册之前，应当仔细阅读本协议，并同意遵守本协议后方可成为注册用户。一旦注册成功，则用户与东东推之间自动形成协议关系，用户应当受本协议的约束。用户在使用特殊的服务或产品时，应当同意接受相关协议后方能使用。</dd>
						  <dd>1.3 本协议则可由保宝网随时更新，用户应当及时关注并同意本站不承担通知义务。本站的通知、公告、声明或其它类似内容是本协议的一部分。</dd>
						  <dt><h3>一、总则</h3></dt>
						  <dd>1.1 东东推的所有权和运营权归天津市数字未来科技有限公司所有。</dd>
						  <dd>1.2 用户在注册之前，应当仔细阅读本协议，并同意遵守本协议后方可成为注册用户。一旦注册成功，则用户与东东推之间自动形成协议关系，用户应当受本协议的约束。用户在使用特殊的服务或产品时，应当同意接受相关协议后方能使用。</dd>
						  <dd>1.3 本协议则可由保宝网随时更新，用户应当及时关注并同意本站不承担通知义务。本站的通知、公告、声明或其它类似内容是本协议的一部分。</dd>
						</dl>
					</div>
					<button type="submit" class="btn btn-default ddt-btn from-btn"  id="continue-register" style="letter-spacing: 0;margin-top: 10%;">继续注册</button>
				</div>
				<p class="text-center copyright">Copyright © 2014 - <h class='shi' style='font-size: 14px;'></h> 京ICP备18006432号-1</p>
			</div>

		</div>
		<script src="../static/js/jquery-1.9.1.min.js" type="text/javascript"></script>
		<script src="../static/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
		<script src="../static/js/config.js" type="text/javascript"></script>
		<script>
			/* 初始化 */
			$(document).ready(function() {
				
				var myDate = new Date();
			//获取当前年
			var year=myDate.getFullYear();
			$('.shi').text(year)
				
				/*　注册与协议之间的转化　*/
				$(".ddt-agreement").click(function() {
					$("#reg-con").hide();
					$("#agr-con").show();
				});
				$("#continue-register").click(function(){
					$("#reg-con").show();
					$("#agr-con").hide();
				});
				
				/*　定义全局变量　*/
				var userNickName = $("#userNickName");
				var userPwd = $("#userPwd");
				var againUserPwd = $("#againUserPwd");
				var phone = $("#phone");
				var code = $("#code");
				
				/* 每个input的失去焦点事件 */
				InputBlur(userNickName);
				InputBlur(userPwd);
				InputBlur(againUserPwd);
				InputBlur(phone);
				InputBlur(code);
				
			});
			
			
			/*注册点击事件*/
			$("#ddtRegister").click(function(){
				var userNickNameObj = $("#userNickName");
				var userPwdObj = $("#userPwd");
				var againUserPwdObj = $("#againUserPwd");
				var phoneObj = $("#phone");
				var codeObj = $("#code");
				
				var ifL = IfLength(userNickNameObj);	/*判断长度*/
				 ifL = IfLength(userPwdObj); 			/*判断长度*/
				 ifL = IfLength(againUserPwdObj);		/*判断长度*/
				 ifL = IfLength(phoneObj);				/*判断长度*/
				 ifL = IfLength(codeObj);				/*判断长度*/
				
				if(ifL){
					var userPwd = $("#userPwd").val();
					var againUserPwd = $("#againUserPwd").val();
					/*判断两次密码是否相等*/
					if(userPwd == againUserPwd){
						
						successHint($("#userPwd"));
						successHint($("#againUserPwd"));
						
						/* 调用注册方法 */
						$.ajax({
				    		type:"post",
				    		url:C.interface.register,
				    		dateType:"json",
				    		data:{
					    		userPhone : phoneObj.val(),
					    		userPwd : userPwd,
					    		code : codeObj.val(),
					    		userNickName : userNickNameObj.val()
					    	},
				    		async:true,
				    		success:function(data){
				    			/*手机号已经存在*/
					    		if(data.code == "10018"){
							      	errorHint(phoneObj,3);
							    }else if(data.code == "10000"){
							    	window.location.href='login.html'; /*成功跳转*/
							    }else{
							    	errorHint(phoneObj,3);
							    }
					    	}
				    	});
						
					}else{
						errorHint($("#userPwd"),1);
			    		errorHint($("#againUserPwd"),1);
					}
				}
			});
			
			/*输入框失去焦点事件*/
			function InputBlur(valStr){
				var valStrOjb = valStr.parent().parent();
				var valStrId = valStr.attr("id") ; 
				
				valStr.blur(function(){
					/*判断两次输入的密码是否一致*/
					if(valStrId == "userPwd" || valStrId == "againUserPwd"){
						var userPwdObj = $("#userPwd").parent().parent();
						var againUserPwdObj = $("#againUserPwd").parent().parent();
						var userPwd = $("#userPwd").val();
						var againUserPwd = $("#againUserPwd").val();
						
						if(userPwd != againUserPwd){
			    			errorHint($("#userPwd"),1);
			    			errorHint($("#againUserPwd"),1);
						}else{
							if(IfLength($("#userPwd")) && IfLength($("#againUserPwd"))){
								successHint($("#userPwd"));
								successHint($("#againUserPwd"));
							}else{
								errorHint($("#userPwd"),0);
								errorHint($("#againUserPwd"),0);
							}
						}
					}else{
						IfLength(valStr);  //调用判断为空
					}
				});
			}
			
			/*判断长度*/
			function IfLength(valStr){
				var valStrOjb = valStr.parent().parent(); 
				var valStrId = valStr.attr("id") ; 
				
				if(valStrId == "phone" ){
					 if(C.phoneReg.test(valStr.val())){
					 	successHint(valStr);
					 }else{
					 	errorHint(valStr,2);
					 }
				}else{
					if (valStr.val().length > 0) {
						successHint(valStr);
						return true;
					}else{
						errorHint(valStr,0);
						return false;
					}
				}
			}
			
			/*成功提示*/
			function successHint(valStr){
				var valStrOjb = valStr.parent().parent(); 
				valStrOjb.removeClass("has-error");
		    	valStrOjb.find(".error").addClass("none");
		    	valStrOjb.find(".help-block").text("　");
		    	
		    	valStrOjb.addClass("has-success");
		    	valStrOjb.find(".success").removeClass("none");
		    	valStrOjb.find(".help-block").text("　");
			}
			
			/*错误提示*/
			function errorHint(valStr,flag){
				var valStrOjb = valStr.parent().parent(); 
				var valStrId = valStr.attr("id") ; 
				
				valStrOjb.removeClass("has-success");
				valStrOjb.find(".success").addClass("none");
		    	valStrOjb.addClass("has-error");					
		    	valStrOjb.find(".error").removeClass("none");
		    	
		    	if(flag==1){
		    		valStrOjb.find(".help-block").text("两次密码不一致");
		    	}else if(flag==0){
		    		if(valStrId == "userNickName"){
						valStrOjb.find(".help-block").text("用户名不能为空");	
					}else if(valStrId == "userPwd"){
						valStrOjb.find(".help-block").text("密码不能为空");
					}else if(valStrId == "againUserPwd"){
						valStrOjb.find(".help-block").text("确认密码不能为空");
					}else if(valStrId == "phone"){
						valStrOjb.find(".help-block").text("手机号不能为空");
					}else if(valStrId == "code"){
						valStrOjb.find(".help-block").text("验证码不能为空");
					}
		    	}else if(flag==2){
		    		valStrOjb.find(".help-block").text("手机号码格式错误");
		    	}else if(flag==3){
		    		valStrOjb.find(".help-block").text("手机号码已注册过了，请更换手机号码！");
		    	}
			}
			
			/*验证码倒计时*/
			var countdown=60; 
			function sendemail(){
			    var obj = $("#verCodeBtn");
			    
			    var phone = $("#phone").val();
			    
			    var phoneObj = $("#phone") ;
			    
			    if(C.phoneReg.test(phone)){
			    	successHint(phoneObj);
			    	/*调用发送验证码接口*/
			    	$.ajax({
			    		type:"post",
			    		url:C.interface.code,
			    		dateType:"json",
			    		data:{
				    		phone : phone
				    	},
			    		async:true,
			    		success:function(data){
				    		if(data.code == "10000"){
						      settime(obj);
						    }
				    	}
			    	});
			    	
			    }else{
			    	//添加错误提示
			    	errorHint(phoneObj,2)
			    }
			}
			function settime(obj) { //发送验证码倒计时
			    if (countdown == 0) { 
			        obj.attr('disabled',false); 
			        obj.val("获取验证码");
			        countdown = 60; 
			        return;
			    } else { 
			        obj.attr('disabled',true);
			        obj.val("重新发送(" + countdown + ")");
			        countdown--; 
			    } 
				setTimeout(function(){settime(obj)},1000) 
			}
			
		</script>
	</body>

</html>